import React from "react";
import { Button } from "antd";
import PropTypes from "prop-types";
import b from "./ButtonsExtended.module.css";

export default function ButtonsExtended({
  number,
  handleClick,
  selectedValue,
}) {
  return (
    <>
      {[...Array(number).keys()].map((num) => (
        <Button
          key={num + 1}
          shape="circle"
          className={`${b.button} ${selectedValue === num + 1 ? b.activeButton : ""}`}
          onClick={() => handleClick(num + 1)}
        >
          {num + 1}
        </Button>
      ))}
    </>
  );
}

ButtonsExtended.propTypes = {
  number: PropTypes.number.isRequired,
  handleClick: PropTypes.func.isRequired,
  selectedValue: PropTypes.number,
};
